<template>
	<u-popup :show="showDetails" mode="center" @close="hide" :round="10" closeable>
		<!-- <view class="cu-modal" v-if="showDetails" :class="showDetails ? 'show' : ''" @tap="hide"> -->
		<view class="bg-white" @tap.stop="" style="padding-top: 30rpx">
			<view class="title">{{ info.name }}</view>
			<template v-if="info && info.id">
				<view class="flex u-m-t-20">
					<scroll-view class="swiper-dot" scroll-y>
						<image
							@tap="changeImg(itemIndex)"
							:class="{ active: curIndex == itemIndex }"
							v-for="(item, itemIndex) in info.shootvideo_video_url"
							class="slide-dot-image"
							:src="item + '?vframe/jpg/offset/1'"
							mode="aspectFill"
						/>
						<image
							@tap="changeImg(itemIndex + info.shootvideo_video_url.length)"
							:class="{ active: curIndex == itemIndex + info.shootvideo_video_url.length }"
							v-for="(item, itemIndex) in info.shootvideo_img_url"
							class="slide-dot-image"
							:src="item + '?imageView2/0/w/140'"
							mode="aspectFill"
						/>
					</scroll-view>
					<view class="slide bg-white flex-sub">
						<scroll-view style="height: 100%">
							<swiper
								class="swiper"
								:current="curIndex"
								@change="cardSwiper"
								:indicator-dots="false"
								:interval="8000"
								:duration="1000"
								indicator-color="#d2d2d2"
								indicator-active-color="#fc743b"
							>
								<swiper-item v-for="(item, itemIndex) in info.shootvideo_video_url">
									<scroll-view style="height: 100%">
										<video
											class="slide-image"
											:class="{ activeVideo: showVideoIndex == itemIndex }"
											:autoplay="true"
											:muted="false"
											:show-mute-btn="true"
											:src="item"
											:id="`video-${itemIndex}`"
											controls
											:poster="item + '?vframe/jpg/offset/1'"
											custom-cache="false"
											object-fit="contain"
											:picture-in-picture-mode="[]"
											:show-background-playback-button="false"
											@fullscreenchange="fullscreenchange"
										></video>
									</scroll-view>
								</swiper-item>
								<swiper-item v-for="(item, itemIndex) in info.shootvideo_img_url" :key="itemIndex">
									<image class="slide-image" :src="item + '?imageView2/0/w/640'" mode="aspectFit" />
								</swiper-item>
							</swiper>
						</scroll-view>
					</view>
				</view>

				<view class="flex align-center foot justify-between">
					<text>鲜花实拍:{{ info.shootvideo_created_at }}</text>
					<view @tap="download">
						<text class="cuIcon-down"></text>
						<text>下载</text>
					</view>
				</view>
			</template>
		</view>
	</u-popup>
</template>
<script>
import { mapActions } from 'vuex';
export default {
	props: {
		height: {
			type: Number
		},
		data: {
			type: Array
		}
	},
	data() {
		return {
			curIndex: 0,
			showDetails: false,
			info: {},
			showVideoIndex: -1
		};
	},
	created() {},
	methods: {
		...mapActions([
			// #ifdef APP-PLUS
			'requestPermissions'
			// #endif
		]),
		cardSwiper(val) {
			this.pauseVideo(this.curIndex);
			this.curIndex = val.detail.current;
		},
		hide() {
			this.showDetails = false;
			this.pauseVideo(this.curIndex);
		},
		show(info) {
			this.info = {
				...info
			};
			this.showDetails = true;
		},
		changeImg(index) {
			if (this.curIndex != index) {
				this.pauseVideo(this.curIndex);
				this.curIndex = index;
			}
		},
		// 切换轮播时，暂停视频播放
		pauseVideo(index) {
			//先判断是不是视频
			if (this.info.shootvideo_video_url.length > 0 && index < this.info.shootvideo_video_url.length) {
				// 当视频隐藏时，暂停播放
				console.log('video', video);
				const video = uni.createVideoContext(`video-${index}`, this);
				video.pause();
			}
		},
		download() {
			let list = [...this.info.shootvideo_video_url, ...this.info.shootvideo_img_url];
			if (this.info.shootvideo_video_url.length > 0 && this.curIndex < this.info.shootvideo_video_url.length) {
				this.downloadVideo(this.info.shootvideo_video_url[this.curIndex]);
			} else {
				this.downloadImg(this.info.shootvideo_img_url[this.curIndex - this.info.shootvideo_video_url.length]);
			}
		},
		downloadVideo(myVideoSrc) {
			uni.showLoading({
				title: '正在下载'
			});
			let link = myVideoSrc;
			let fileName = new Date().valueOf();
			uni.downloadFile({
				url: link,
				// #ifdef MP-WEIXIN
				filePath: wx.env.USER_DATA_PATH + '/' + fileName + '.mp4',
				// #endif
				success: async res => {
					let filePath = res.tempFilePath;
					//#ifdef MP-WEIXIN
					filePath = res.filePath;
					//#endif
					console.log('filePath', filePath);
					// #ifdef APP-PLUS
					let result = await this.requestPermissions('WRITE_EXTERNAL_STORAGE');
					if (result !== 1) return;
					// #endif
					uni.saveVideoToPhotosAlbum({
						filePath,
						success: file => {
							uni.showToast({
								title: '下载成功',
								icon: 'success',
								duration: 2000
							});
							/* 删除临时文件 */
							// #ifdef MP-WEIXIN
							let fileMgr = wx.getFileSystemManager();
							fileMgr.unlink({
								filePath: wx.env.USER_DATA_PATH + '/' + fileName + '.mp4',
								success: function (r) {}
							});
							// #endif
						},
						fail: err => {
							console.log(err);
							// if (err.errMsg === 'saveVideoToPhotosAlbum:fail auth deny')
							if (
								'saveVideoToPhotosAlbum:fail auth deny' == res.errMsg ||
								'saveVideoToPhotosAlbum:fail:auth deny' == res.errMsg ||
								'saveVideoToPhotosAlbum:fail:auth denied' == res.errMsg ||
								'saveVideoToPhotosAlbum:fail authorize no response' == res.errMsg
							) {
								uni.showModal({
									title: '提示',
									content: '需要您授权保存相册',
									showCancel: false,
									success: data => {
										uni.openSetting({
											success(settingdata) {
												if (settingdata.authSetting['scope.writePhotosAlbum']) {
													uni.showModal({
														title: '提示',
														content: '获取权限成功,再次点击下载即可保存',
														showCancel: false
													});
												} else {
													uni.showModal({
														title: '提示',
														content: '获取权限失败，将无法保存到相册哦~',
														showCancel: false
													});
												}
											}
										});
									}
								});
							} else {
								uni.showToast({
									title: '下载失败',
									icon: 'none',
									duration: 2000
								});
							}
						}
					});
				},
				fail: () => {
					uni.showToast({
						title: '下载失败',
						icon: 'none',
						duration: 2000
					});
				},
				complete: () => {
					uni.hideLoading();
				}
			});
		},
		downloadImg(img) {
			let that = this;
			let index = 0;
			//#ifdef MP-WEIXIN
			// 第一步，先调用授权功能
			uni.authorize({
				scope: 'scope.writePhotosAlbum',
				success() {
					that.downloadFile(img);
				},
				fail() {
					// 2、授权失败 弹框再次要求授权
					uni.showModal({
						title: '您需要授权相册权限',
						success(res) {
							// 2.1点击确认按钮就调取授权设置页面
							if (res.confirm) {
								// 2.2 开启授权设置页面
								uni.openSetting({
									success(res) {},
									fail(res) {}
								});
							}
						}
					});
				}
			});
			// #endif
			// #ifdef APP-PLUS
			this.downloadFile(img);
			// #endif
		},
		downloadFile(item) {
			let that = this;
			uni.showLoading({
				title: '正在下载'
			});
			// 1.1 调用下载api方法
			uni.downloadFile({
				url: item, // 获取要下载的服务器里的图片地址
				success: res => {
					// 1.2 获取远程图片地址后,将图片地址缓存到本地
					if (res.statusCode === 200) {
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath, // 把远程的图片地址及图片保存到本地
							success: function (res) {
								uni.hideLoading();
								uni.showToast({
									title: '下载成功',
									icon: 'success',
									duration: 2000
								});
							},
							fail: function (res) {
								uni.showToast({
									title: '保存失败',
									icon: 'none'
								});
								if (res.errMsg == 'saveImageToPhotosAlbum:fail cancel') {
									return;
								}
							}
						});
					}
				},
				complete: () => {}
			});
		},
		fullscreenchange(e) {
			console.log('e.detail', e.detail);
			if (e.detail.fullScreen) {
				this.showVideoIndex = this.curIndex;
			} else {
				this.showVideoIndex = -1;
			}
		}
	}
};
</script>
<style lang="scss">
@import 'colorui/modal.scss';
</style>
<style lang="scss" scoped>
// .cu-modal .cu-dialog {
// 	width: 680upx;

// }
.title {
	padding-left: 30upx;
}

.foot {
	padding: 30upx;
}
.slide {
	// position: relative;
	min-width: auto;
}

.swiper {
	width: 550upx;
	height: 650upx;
	// position: relative;
}

.slide-image {
	width: 100%;
	position: absolute;
	top: 0;
	height: 650upx;

	&.activeVideo {
		position: fixed;
		top: 0;
		left: 0;
	}
}

.swiper-dot {
	width: 120upx;
	height: 650upx;

	.slide-dot-image {
		height: 90upx;
		width: 90upx;
		margin: 0 auto 10upx;
		display: block;
		border-radius: 8upx;
		opacity: 0.5;
		border: 2px solid transparent;

		&.active {
			opacity: 1;
			border-color: #fc743c;
		}
	}
}
</style>
